<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title></title>
<!--    <script src="js/jquery.min.js"></script>
    <script src="masonry-master/masonry.js"></script>-->
    <script src="js/jquery.min.js"></script>
    <script src="masonry-master/dist/masonry.pkgd.min.js"></script>
    <script src="imagesloaded-master/imagesloaded.pkgd.min.js"></script>
    <style>
        .grid-item { width: 200px; }
        .grid-item--width2 { width: 400px; }
        .grid-item img {
            max-width: 100%
        }
    </style>
</head>
<body>
<div class="grid">
    <div class="grid-item"><img src="images/1.jpg"></div>
    <div class="grid-item"><img src="images/2.jpg"></div>
    <div class="grid-item"><img src="images/3.jpg"></div>
    <div class="grid-item"><img src="images/4.jpg"></div>
    <div class="grid-item"><img src="images/5.jpg"></div>
    <div class="grid-item"><img src="images/6.jpg"></div>
    <div class="grid-item"><img src="images/7.jpg"></div>
    <div class="grid-item"><img src="images/8.jpg"></div>
    <div class="grid-item"><img src="images/9.jpg"></div>
    <div class="grid-item"><img src="images/10.jpg"></div>
    <div class="grid-item"><img src="images/11.jpg"></div>
    <div class="grid-item"><img src="images/12.jpg"></div>
    <div class="grid-item"><img src="images/13.jpg"></div>
    <div class="grid-item"><img src="images/14.jpg"></div>
    <div class="grid-item"><img src="images/15.jpg"></div>
    <div class="grid-item"><img src="images/16.jpg"></div>
    <!-- <div class="grid-item"><img src="images/17.jpg"></div> -->
    <!-- <div class="grid-item"><img src="images/18.jpg"></div> -->
    <!-- <div class="grid-item"><img src="images/19.jpg"></div> -->
<!--    <div class="grid-item"><img src="images/20.jpg"></div>
    <div class="grid-item"><img src="images/21.jpg"></div>
    <div class="grid-item"><img src="images/22.jpg"></div>
    <div class="grid-item"><img src="images/23.jpg"></div>
    <div class="grid-item"><img src="images/24.jpg"></div>
    <div class="grid-item"><img src="images/25.jpg"></div>
    <div class="grid-item"><img src="images/26.jpg"></div>
    <div class="grid-item"><img src="images/27.jpg"></div>
    <div class="grid-item"><img src="images/28.jpg"></div>
    <div class="grid-item"><img src="images/29.jpg"></div>
    <div class="grid-item"><img src="images/30.jpg"></div>
    <div class="grid-item"><img src="images/31.jpg"></div>
    <div class="grid-item"><img src="images/32.jpg"></div>
    <div class="grid-item"><img src="images/33.jpg"></div>
    <div class="grid-item"><img src="images/34.jpg"></div>
    <div class="grid-item"><img src="images/35.jpg"></div>
    <div class="grid-item"><img src="images/36.jpg"></div>
    <div class="grid-item"><img src="images/37.jpg"></div>
    <div class="grid-item"><img src="images/38.jpg"></div>
    <div class="grid-item"><img src="images/39.jpg"></div>
    <div class="grid-item"><img src="images/40.jpg"></div>-->
</div>
<script>

    var $grid = $('.grid').imagesLoaded( function() {
        // init Masonry after all images have loaded
        $grid.masonry({
            // options
            itemSelector: '.grid-item',
            columnWidth: 200
        });
    });

</script>
</body>
</html>